<template>
  <div class="score-record-wrp">
    <header :class="['header-con', 'scores-hd', tabPosition ? 'header-w-bg' : '']">
      <router-link to='/membercenter'>
        <a>
          <i class="back-icon"></i>
        </a>
      </router-link>
      <h1 class="header-tit">我的积分</h1>
      <div class="description" @click="showTips">说明</div>
    </header>
    <ul :class="['myScores-tab', 'pa', tabPosition ? '' : 'hide']">
      <li v-for="(item, index) in tabCtl" :class="[item.ispick ? 'cur' : '']" :tab-index="index" @click="tabChange">
        {{ item.text }}
      </li>
    </ul>
    <div class="my-page" @scroll="scrollTab">
      <div class="myScores">
        <h2 v-cloak>{{ myScores.content.totalPoints }}</h2>
        <p v-cloak>本月月底过期积分: {{ myScores.content.fastExpirePoints }}</p>
        <span>积分商城<i></i></span>
      </div>
      <ul class="myScores-tab">
        <li v-for="(item, index) in tabCtl" :class="[item.ispick ? 'cur' : '']" :tab-index="index" @click="tabChange">
          {{ item.text }}
        </li>
      </ul>
      <ul class="myScores-list">
        <template v-if="showType=='all'">
          <li class="flex-box" v-for="item in myScores.content.ponitsList">
            <div class="myScores-img">
              <img src="../../assets/image/membercenter/score.png" alt="">
            </div>
            <div class="list-flex">
              <h2>{{ item.gzlsourceType != '' ? item.gzlsourceType : item.mainProductName }}</h2>
              <p>2017-05-02</p>
            </div>
            <div :class="[ (item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣') ? 'myScores-num' : 'myScores-num active']">{{ (item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣') ? '-' : '+' }}{{ item.points }}</div>
          </li>
        </template>
        <template v-if="showType=='cost'">
          <li class="flex-box" v-for="item in myScores.content.ponitsList" v-if="(item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣')">
            <div class="myScores-img">
              <img src="../../assets/image/membercenter/score.png" alt="">
            </div>
            <div class="list-flex">
              <h2>{{ item.gzlsourceType != '' ? item.gzlsourceType : item.mainProductName }}</h2>
              <p>2017-05-02</p>
            </div>
            <div :class="[ (item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣') ? 'myScores-num' : 'myScores-num active']">{{ (item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣') ? '-' : '+' }}{{ item.points }}</div>
          </li>
        </template>
        <template v-if="showType=='income'">
          <li class="flex-box" v-for="item in myScores.content.ponitsList" v-if="!(item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣')">
            <div class="myScores-img">
              <img src="../../assets/image/membercenter/score.png" alt="">
            </div>
            <div class="list-flex">
              <h2>{{ item.gzlsourceType != '' ? item.gzlsourceType : item.mainProductName }}</h2>
              <p>2017-05-02</p>
            </div>
            <div :class="[ (item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣') ? 'myScores-num' : 'myScores-num active']">{{ (item.gzlsourceType=='积分兑换'||item.gzlsourceType=='积分抵扣') ? '-' : '+' }}{{ item.points }}</div>
          </li>
        </template>
      </ul>
    </div>
    <!-- content end -->
    <!-- 积分说明 -->
    <div class="description-popup" v-if="tipCtl">
      <h2>积分说明</h2>
      <div class="description-info">
        <p>一、会员积分的获得</p>
        <p>(一)&nbsp;会员在广之旅购买广之旅自营非单项产品，每消费一元积1分，不足一元不积分，相关积分将在团队旅游行程结束7日后，由系统自动将积分计入对应会员账号。如会员取消购买，则取消积分；如更改购买，则按照更改后购买产品的消费金额计发积分入对应会员账号。</p>
        <p>(二)&nbsp;会员在广之旅购买广之旅自营单项产品，每消费四元积1分，不足四元不积分，在会员所购买的单项产品消费完毕7日后，由系统自动将积分计入对应会员账号。如会员取消购买，则取消积分；如更改购买，则按照更改后购买产品的消费金额计发积分入对应会员账号。</p>
        <p>(三)&nbsp;会员参与会员活动有机会获得积分，积分获得标准以当次的会员活动说明为准。</p>
        <p>(四)&nbsp;会员在广之旅购买机票、定制团、非自营产品等不获得积分。同业订单不获得积分。</p>
        <p>(五)&nbsp;会员在广之旅官网、微信公众号、手机应用APP移动终端完善个人信息、线路行程点评、参加问卷调查、签到等可获得积分，积分获得标准以当次说明为准。</p>
        <p>二、会员积分使用说明</p>
        <p>(一) 会员可登录广之旅官方网站，点击“会员中心”--"我的积分"，可查询积分明细和总额。积分可用于抵扣会员在广之旅报名购买指定产品的消费，也可在“广之旅积分商城”（目前在建设中）兑换礼品，积分抵扣消费或兑换礼品后，系统将自动扣除已使用的积分。积分仅限会员本人使用，不可转让至其他会员或任何第三人。</p>
        <p>(二)&nbsp;积分不能购买旅游保险产品。</p>
        <p>(三)&nbsp;积分用于抵扣消费或兑换礼品的部分不再积分，也不开具发票。</p>
        <p>(四)&nbsp;会员已确认兑换的礼品，具体退换规则见《广之旅积分商城规则》。</p>
        <p>(五)&nbsp;会员积分只能用于兑换礼品或抵扣消费，不能兑换成现金。</p>
        <p>(六)&nbsp;会员积分有效期</p>
        <p>1. 会员积分自发放之日起有效期为2年。</p>
        <p>2. 超出积分有效期未使用的积分自动作废。</p>
        <p>三、会员等级及会员升降级规则</p>
        <p>成为广之旅会员后，广之旅将按照会员的积分情况进行会员分档管理与服务：</p>
        <p>(一)&nbsp;客户申办会员的初始等级均默认为普通会员，会员注册成功后永久有效。</p>
        <p>(二)&nbsp;广之旅会员共分四个等级，由高至低分别是钻石卡会员、金卡会员、银卡会员、普通会员。</p>
        <p>(三) 会员的升级</p>
        <p>1.&nbsp;普通会员升级至银卡会员：持卡人自注册成为会员之日起一年内在广之旅消费新增积分达10000积分，升级为银卡会员。</p>
        <p>2.&nbsp;银卡会员升级至金卡会员：持卡人自成为银卡会员后一年内在广之旅消费新增积分达30000积分，升级为金卡会员。</p>
        <p>3.&nbsp;金卡会员升级至钻石卡会员：持卡人自成为金卡会员后一年内在广之旅消费新增积分达60000积分，升级为钻石卡会员。</p>
        <p>4.&nbsp;普通会员跃级升级至金卡会员：普通会员在广之旅一次性消费新增积分达30000积分，升级为金卡会员。</p>
        <p>5.&nbsp;普通会员跃级升级至钻石卡会员：普通会员在广之旅一次性消费新增积分达60000积分，升级为钻石卡会员。</p>
        <p>6.&nbsp;银卡会员跃级升级至钻卡会员：银卡会员在广之旅一次性消费新增积分达60000积分，升级为钻石卡会员。</p>
        <p>(四)&nbsp;会员的降级与保级</p>
        <p>1.&nbsp;普通会员：不再降级。</p>
        <p>2.&nbsp;银卡会员保级与降级：自成为银卡会员之日起，两年内新增积分低于10000积分，自动降为普通会员。</p>
        <p>3.&nbsp;金卡会员保级与降级：自成为金卡会员之日起，两年内新增积分低于30000积分，自动降为银卡会员。</p>
        <p>4.&nbsp;钻石会员保级与降级：自成为钻石会员之日起，两年内新增积分低于60000积分，自动降为金卡会员。</p>
        <p>5.&nbsp;会员降级按级次递降，不跃级下降。</p>
      </div>
      <div class="x-btn" @click="hideTips"><i class="icon-x-o"></i></div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import weui from 'weui.js'
  import common from '../../assets/js/common'
  export default {
    data () {
      return {
        myScores: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'totalPoints': '',
            'fastExpirePoints': '',
            'ponitsList': []
          },
          'accessToken': null
        },
        showType: 'all',
        tabCtl: [
          {ispick: true, text: '全部', type: 'all'},
          {ispick: false, text: '收入', type: 'income'},
          {ispick: false, text: '支出', type: 'cost'}
        ],
        tabPosition: false,
        tipCtl: false
      }
    },
    created: function () {
      var self = this
      var memberId = common.memberid
      var config = {
        headers: {
          'access-token': common.accesstoken,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      var data = qs.stringify({
        memberId: memberId
      })
      self.getScore(data, config)
    },
    mounted: function () {
      var self = this
      self.scrollTab()
    },
    methods: {
      getScore: function (data, config) {
        var queryUrl = common.api.memberCenter.scoreInfo
        var self = this
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.myScores = res.data
            loading.hide()
          } else {
            loading.hide()
            weui.toast('请求失败')
          }
        })
      },
      scrollTab: function () {
        var self = this
        var myPage = document.querySelector('.my-page')
        var offsetTop = document.querySelectorAll('.myScores-tab')[1].offsetTop
        var scrollTop = myPage.scrollTop
        if (scrollTop >= offsetTop - 44) {
          self.floatTab(true)
        } else {
          self.floatTab(false)
        }
      },
      tabChange: function (e) {
        var self = this
        var tabIndex = e.currentTarget.getAttribute('tab-index')
        for (var i = 0; i < self.tabCtl.length; i++) {
          self.tabCtl[i].ispick = false
        }
        self.tabCtl[tabIndex].ispick = true
        self.showType = self.tabCtl[tabIndex].type
      },
      floatTab: function (status) {
        var self = this
        self.tabPosition = status
      },
      showTips: function () {
        var self = this
        self.tipCtl = true
      },
      hideTips: function () {
        var self = this
        self.tipCtl = false
      }
    }
  }
</script>

<style lang="scss">
  @import '../../assets/sass/member/scores';
</style>
